<template>
	<div class="goods">
		<x-header :left-options="{backText: ''}">
			<div class="hearder_nav">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">商品销售</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">商圈热销</tab-item>
				</tab>
			</div>
		</x-header>
		<div class="content1" v-if="selectIndex===0">
			<div class="conditions">
				<p @click="selectDays">
					<span v-if="selectId===1">昨日</span>
					<span v-if="selectId===2">近7日</span>
					<span v-if="selectId===3">近30日</span>
					<img :class="{rotates:is_rotate}" src="../../assets/images/statistics/arrow_down.png" alt="" />
				</p>
				<p @click="selected(1)" :class="{selected2:selectId2===1}">销售额最高</p>
				<p @click="selected(2)" :class="{selected2:selectId2===2}">销量最高</p>
				<p @click="selected(3)" :class="{selected2:selectId2===3}">赞</p>
				<p @click="selected(4)" :class="{selected2:selectId2===4}">踩</p>
			</div>
			<div class="allDay" v-if="is_rotate">
				<p @click="selects(1)" :class="{selected:selectId===1}">昨日</p>
				<p @click="selects(2)" :class="{selected:selectId===2}">近7日</p>
				<p @click="selects(3)" :class="{selected:selectId===3}">近30日</p>
			</div>
			<div class="no_content1" :style="{height:heights+'rem'}">
				<img src="../../assets/images/statistics/none.jpg" alt="" />
				<p>未找到符合条件的商品</p>
			</div>
			<div class="select_discount">
				<img src="../../assets/images/statistics/discount.jpg" alt="" />
				<p>帮你选折扣菜</p>
			</div>
		</div>
		<div class="content3" v-if="selectIndex===1">
			<div class="conditions">
				<p @click="selectDays3">
					<span v-if="selectId3===1">近7日</span>
					<span v-if="selectId3===2">近30日</span>
					<img :class="{rotates3:is_rotate3}" src="../../assets/images/statistics/arrow_down.png" alt="" />
				</p>
				<p @click="selected3(1)" :class="{blues:selectId4===1}">高销售额</p>
				<p @click="selected3(2)" :class="{blues:selectId4===2}">最畅销</p>
				<p @click="selected3(3)" :class="{blues:selectId4===3}">热销新品</p>
			</div>
			<div class="allDay" v-if="is_rotate3">
				<p @click="selects3(1)" :class="{selected:selectId3===1}">近7日</p>
				<p @click="selects3(2)" :class="{selected:selectId3===2}">近30日</p>
			</div>
			<div class="goods_list_1" v-if="selectId4===1" v-for="(item,index) in 4" :key="index">
				<div class="goods_img">
					<p>{{ index+1 }}</p>
					<img src="../../assets/images/banner/banner.jpg" alt="" />
				</div>
				<div class="goods_info">
					<h3>益力多 乳酸菌饮料 100ml</h3>
					<p>
						<span style="border: 1px solid #fd9e40;">销售额￥228</span>
					</p>
					<p>销量&nbsp;19&nbsp;好评率100%</p>
					<p>
						<img src="../../assets/images/statistics/stores.jpg" alt="" />
						<span>美宜佳（上梅林梅村路店）</span>
					</p>
				</div>
			</div>
			<div class="goods_list_2" v-if="selectId4===2" v-for="(item,index) in 6" :key="index">
				<div class="goods_img">
					<p>{{ index+1 }}</p>
					<img src="../../assets/images/banner/banner.jpg" alt="" />
				</div>
				<div class="goods_info">
					<h3>百威 9.7° 啤酒 330ml/听</h3>
					<p class="red1">
						<span>卖出45份</span>
					</p>
					<p>销量&nbsp;19&nbsp;好评率100%</p>
					<p>
						<img src="../../assets/images/statistics/stores.jpg" alt="" />
						<span>美宜佳（上梅林梅村路店）</span>
					</p>
				</div>
			</div>
			<div class="goods_list_3" v-if="selectId4===3" v-for="(item,index) in 8" :key="index">
				<div class="goods_img">
					<p>{{ index+1 }}</p>
					<img src="../../assets/images/banner/banner.jpg" alt="" />
				</div>
				<div class="goods_info">
					<h3>浪莎 精梳棉女船袜 1双/袋</h3>
					<p>
						<span class="red1">卖出1份</span>
						<span>已售0天</span>
					</p>
					<p>销量&nbsp;19&nbsp;好评率100%</p>
					<p>
						<img src="../../assets/images/statistics/stores.jpg" alt="" />
						<span>美宜佳（上梅林梅村路店）</span>
					</p>
				</div>
			</div>
			<div class="no_more_data">更多详情数据，请前往电脑版查看</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, XDialog } from 'vux';
	export default {
		name: 'goods',
		data() {
			return {
				selectIndex: 0, //0-商品销售  1-商圈热销
				is_rotate: false,
				is_rotate3: false,
				selectId: 2, //1-昨日  2-近7日  3-近30日
				selectId3: 1, //1-近7日  2-近30日
				selectId2: 1, //1-销售额最高  2-销量最高  3-赞  4-踩
				selectId4: 1, //1-高销售额  2-最畅销  3-热销新品
				heights: 0,
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			XDialog
		},
		computed: {

		},
		created() {
			this.selectIndex = +this.$route.params.id;
			this.heights = window.screen.availHeight / 100 * 2 - 4.08;
		},
		methods: { //商品销售
			onItemClick(val) {
				this.selectIndex = val;
			},
			//切换时间
			selectDays() {
				this.is_rotate = !this.is_rotate;
				if(this.is_rotate) {
					this.$("body").css('background', '#666');
					this.$(".conditions").css('borderBottom', '1px solid #e5e5e5');
					this.$(".no_content1").css('display', 'none');
				} else {
					this.$("body").css('background', 'transparent');
					this.$(".conditions").css('borderBottom', '.2rem solid #e5e5e5');
					this.$(".no_content1").css('display', '');
				}
			},
			selectDays3() {
				this.is_rotate3 = !this.is_rotate3;
				if(this.is_rotate3) {
					this.$("body").css('background', '#666');
					this.$(".conditions").css('borderBottom', '1px solid #e5e5e5');
					this.$(".no_content3").css('display', 'none');
				} else {
					this.$("body").css('background', 'transparent');
					this.$(".conditions").css('borderBottom', '.2rem solid #e5e5e5');
					this.$(".no_content3").css('display', '');
				}
			},
			//天数选择
			selects(id) {
				this.selectId = id;
				this.is_rotate = false;
				this.$("body").css('background', 'transparent');
			},
			selects3(id) {
				this.selectId3 = id;
				this.is_rotate3 = false;
				this.$("body").css('background', 'transparent');
			},
			//选择其他条件
			selected(id) {
				this.selectId2 = id;
			},
			selected3(id) {
				this.selectId4 = id;
				console.log(this.selectId4);
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.goods {
		.hearder_nav {
			margin-top: .08rem;
		}
		.content1 {
			background: #fff;
			.conditions {
				font-size: .3rem;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: .2rem solid #e5e5e5;
				.rotates {
					transform: rotate(180deg);
				}
				p {
					padding: .26rem 0;
				}
				p:nth-of-type(1) {
					width: 25%;
					display: flex;
					align-items: center;
					border-right: 1px solid #e3e3e3;
					color: #1c1c1c;
					img {
						width: .32rem;
						height: .32rem;
					}
				}
				p:nth-of-type(2),
				p:nth-of-type(3),
				p:nth-of-type(4),
				p:nth-of-type(5) {
					color: #898989;
				}
				.selected2 {
					color: #1c1c1c!important;
				}
			}
			.allDay {
				font-size: .3rem;
				color: #8c8c8c;
				text-align: left;
				background: #fff;
				z-index: 999;
				p {
					padding: .26rem .2rem;
					border-bottom: 1px solid #e3e3e3;
				}
				.selected {
					color: #00b687;
				}
			}
			.no_content1 {
				background: #fff;
				padding-top: 1.18rem;
				img {
					width: 1.74rem;
					height: 1.74rem;
				}
				p {
					font-size: .3rem;
					color: #696969;
				}
			}
			.select_discount {
				width: 2.78rem;
				height: .7rem;
				background: #02c1af;
				position: fixed;
				bottom: 2rem;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-top-left-radius: 1.5rem;
				border-bottom-left-radius: 1.5rem;
				img {
					width: .59rem;
					height: .59rem;
					border-top-left-radius: 1.5rem;
					border-bottom-left-radius: 1.5rem;
				}
				p {
					font-size: .34rem;
					color: #fff;
				}
			}
		}
		.content3 {
			background: #fff;
			.conditions {
				font-size: .3rem;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: .2rem solid #e5e5e5;
				.rotates3 {
					transform: rotate(180deg);
				}
				p {
					padding: .26rem 0;
				}
				p:nth-of-type(1) {
					width: 20%;
					display: flex;
					align-items: center;
					border-right: 1px solid #e3e3e3;
					color: #1c1c1c;
					img {
						width: .32rem;
						height: .32rem;
					}
				}
				p:nth-of-type(2),
				p:nth-of-type(3),
				p:nth-of-type(4) {
					color: #898989;
				}
				.blues {
					color: #00b29c!important;
					border-bottom: 2px solid #00b29c;
				}
			}
			.allDay {
				font-size: .3rem;
				color: #8c8c8c;
				text-align: left;
				background: #fff;
				z-index: 999;
				p {
					padding: .26rem .32rem;
					border-bottom: 1px solid #e3e3e3;
				}
				.selected {
					color: #00b687;
				}
			}
			.goods_list_1,
			.goods_list_2,
			.goods_list_3 {
				display: flex;
				padding: .32rem 0;
				margin-left: .3rem;
				border-bottom: 1px solid #e5e5e5;
				.goods_img {
					position: relative;
					display: flex;
					p {
						position: absolute;
						top: 0;
						left: 0;
						font-size: .2rem;
						color: #fff;
						background: #fd4745;
						padding: .05rem .08rem;
						border-top-left-radius: .05rem;
					}
					img {
						width: 1.7rem;
						height: 1.7rem;
						border-radius: .05rem;
					}
				}
				.goods_info {
					margin-left: .2rem;
					text-align: left;
					h3 {
						font-size: .32rem;
						color: #000;
						margin-bottom: .18rem;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
					p:nth-of-type(1) {
						display: inline;
						font-size: .18rem;
						color: #fd9e40;
						span:nth-of-type(1) {
							padding: .05rem;
							border: 1px solid #fe4430;
						}
						span:nth-of-type(2) {
							padding: .05rem;
							border: 1px solid #fd9e40;
							margin-left: .28rem;
						}
					}
					p:nth-of-type(2),
					p:nth-of-type(3) {
						font-size: .22rem;
						color: #6c6c6c;
					}
					p:nth-of-type(2) {
						margin: .18rem 0 .1rem 0;
					}
					p:nth-of-type(3) {
						display: flex;
						align-items: center;
						img {
							width: .2rem;
							height: .2rem;
						}
					}
					.red1 {
						color: #fe4430!important;
					}
				}
			}
			.no_more_data {
				font-size: .2rem;
				color: #A9A9A9;
				padding: .1rem;
			}
		}
	}
</style>